@extends('layouts.app')

@section('content')
<div class="container">
    <!-- 返回按钮 -->
    <div class="row mb-4">
        <div class="col-md-12">
            <a href="{{ route('admin.lottery.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回摇奖页面
            </a>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-12">
            <!-- 中奖清单卡片 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">中奖用户清单</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>用户昵称</th>
                                    <th>中奖时间</th>
                                    <th>兑换码编号</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($winners as $winner)
                                <tr>
                                    <td>{{ $winner->wechat_users_id }}</td>
                                    <td>{{ $winner->wechatUser->nickname ?? '未设置昵称' }}</td>
                                    <td>{{ $winner->draw_time->format('Y-m-d H:i:s') }}</td>
                                    <td>
                                        @if($winner->verification_codes_id)
                                            @if($winner->verificationCode && $winner->verificationCode->is_used === 3)
                                                {{ $winner->verificationCode->card_number }}
                                            @else
                                                验证码未绑定或已失效
                                            @endif
                                        @else
                                            未分配验证码
                                        @endif
                                    </td>
                                    <td>
                                        @if(!$winner->verification_codes_id)
                                            <button type="button" 
                                                    class="btn btn-primary btn-sm"
                                                    onclick="showBindDialog({{ $winner->id }})">
                                                绑定兑换码
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center">暂无中奖记录</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页导航 -->
                    @if ($winners->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $winners->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 绑定兑换码对话框 -->
<div class="modal fade" id="bindCodeModal" tabindex="-1" aria-labelledby="bindCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bindCodeModalLabel">绑定兑换码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger" id="bindError" style="display: none;"></div>
                <div class="alert alert-success" id="bindSuccess" style="display: none;"></div>
                <form id="bindCodeForm">
                    <input type="hidden" id="userId" name="userId">
                    <div class="mb-3">
                        <label for="cardNumber" class="form-label">兑换码卡号</label>
                        <input type="text" class="form-control" id="cardNumber" name="cardNumber" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="bindCode()">确认绑定</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function showBindDialog(userId) {
    if (confirm('确定要绑定这个兑换码吗？')) {
        document.getElementById('userId').value = userId;
        const modal = new bootstrap.Modal(document.getElementById('bindCodeModal'));
        modal.show();
    }
}

function bindCode() {
    const userId = document.getElementById('userId').value;
    const cardNumber = document.getElementById('cardNumber').value;
    
    if (!cardNumber) {
        showError('请输入兑换码卡号');
        return;
    }

    // 禁用按钮防止重复提交
    const submitButton = document.querySelector('#bindCodeModal .btn-primary');
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';

    // 发送绑定请求
    fetch('/admin/lottery/bind-code', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            user_id: userId,
            card_number: cardNumber
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccess(data.message || '绑定成功');
            // 2秒后刷新页面
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            showError(data.message || '绑定失败');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showError('请求失败，请稍后重试');
    })
    .finally(() => {
        // 恢复按钮状态
        submitButton.disabled = false;
        submitButton.innerHTML = '确认绑定';
    });
}

function showError(message) {
    const errorDiv = document.getElementById('bindError');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
    document.getElementById('bindSuccess').style.display = 'none';
}

function showSuccess(message) {
    const successDiv = document.getElementById('bindSuccess');
    successDiv.textContent = message;
    successDiv.style.display = 'block';
    document.getElementById('bindError').style.display = 'none';
}
</script>
@endpush 